<template>
    <div class="crumb-box">
        <!-- 面包屑 -->
        <div class="bread-crumb" v-if="breadCrumb?.length > 0">
            <div v-for="(v, i) in breadCrumb" @click="changeCrumb(v, i)" :key="i" class="bread-crumb-item">
                <span class="bread-crumb-line" v-if="i != 0">/</span>
                <span class="bread-crumb-word">{{ v.fileName }}</span>
            </div>
        </div>
        <!-- 内容区 -->
        <div class="crumb-box-content">
            <div class="box-content-item" :class="v.directory ? 'is-directory' : 'no-directory'" v-for="(v, i) in fileList"
                @click="setBreadCrumb(v)" :key="i">
                {{ v.fileName }}
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";

interface BreadCrumb {
    fileName: string; // 目录名称
    id: number | string | null; // 目录id
    directory: boolean;  // 如果是文件夹就是true，否则是false
}
const breadCrumb = ref<BreadCrumb[]>([{
    fileName: '全部文件',
    id: null, // 第一级的id应该是null
    directory: true, // 是否是目录
}])
const fileList = ref<BreadCrumb[]>([
    // {
    //     fileName:'全部文件',
    //     id:null,
    //     directory:true
    // }
])
// 模拟调接口获取某一级数据
const getFileList = (o?: BreadCrumb | null) => {
    // 第一次请求可能没数据
    setTimeout(() => {

        fileList.value = [
            {
                fileName: '文件夹名' + (breadCrumb.value.length),
                id: Math.round(Math.random() * 100),
                directory: true
            },
            {
                fileName: Math.round(Math.random() * 10000) + ".zip",
                id: Math.round(Math.random() * 100),
                directory: false
            },
        ]
    }, 300);
}
const changeCrumb = (o: BreadCrumb, i: number) => {
    console.log("面包屑切换到了第" + (i + 1) + '级');
    breadCrumb.value.splice(i + 1)
    getFileList(o)
}
// 请求下一级
const setBreadCrumb = (o: BreadCrumb) => {
    if (!o.directory) {
        console.log("文件不能点击")
        return
    }
    if (o.id) {
        // 如果是第一级，没有目录id，默认是breadCrumb有值全部文件，不需要再放了
        breadCrumb.value.push(o)
    }
    console.log("跳到了第" + (breadCrumb.value.length) + '级');
    getFileList(o)
}

onMounted(() => {
    // 获取第一级的目录
    getFileList()
});
</script>
<style lang="scss" scoped src="@/components/BreadCrumb/index.scss"></style>


